<template>
    <ul>
      <ToDoItem v-for="(todo, index) in todos" :key="index" :todo="todo" :index="index"
        @toggle-completion="$emit('toggle-completion', index)" @delete-todo="$emit('delete-todo', index)" />
    </ul>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import ToDoItem from './ToDoItem.vue';

// 定义 todo 的类型
interface Todo {
id: number;
text: string;
completed: boolean;
}

const props = defineProps<{
todos: Todo[];
}>();

const emit = defineEmits(['toggle-completion', 'delete-todo']);
</script>

<style scoped>
ul {
list-style-type: none;
padding: 0;
}
</style>